<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Get User Media Code Along!</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="photobooth">
        <div class="controls">
            <button class="take-photo">Take Photo</button>
            <button class="save-photo">Save Photo</button>
            <div class="rgb">
                <label for="rmin">Red Min:</label>
                <input type="range" min=0 max=255 name="rmin">
                <label for="rmax">Red Max:</label>
                <input type="range" min=0 max=255 name="rmax">
                <br>
                <label for="gmin">Green Min:</label>
                <input type="range" min=0 max=255 name="gmin">
                <label for="gmax">Green Max:</label>
                <input type="range" min=0 max=255 name="gmax">
                <br>
                <label for="bmin">Blue Min:</label>
                <input type="range" min=0 max=255 name="bmin">
                <label for="bmax">Blue Max:</label>
                <input type="range" min=0 max=255 name="bmax">
            </div>
        </div>

        <div class="hasimg">
            <p>照片区域：</p>
            <canvas class="photo" height="200" width="300"></canvas>
        </div>
        <div class="hasimg">
            <p>实时视频区域：</p>
            <video class="player"></video>
        </div>
        <div class="hasimg">
            <p>变色画布区域:</p>
            <div class="strip">
                <a href="" class="my-img-wrapper"><img alt="暂未保存图像" id='my-img'></a>
            </div>
        </div>
    </div>

    <audio class="snap" src="http://wesbos.com/demos/photobooth/snap.mp3" hidden></audio>

    <script src="./script.js"></script>
</body>
</html>
